.container {
    width: 100%;
    height: 1.4rem;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    position: fixed;
    background-color: #ffffff;

    &:global(.active) {
        box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.08);
    }

    > a {
        font-size: 22px;
        font-weight: bold;
        color: #111111;
        cursor: pointer;

        &:hover {
            color: #111111;
        }
    }

    > .head {
        position: relative;

        > .modal {
            width: 4.45rem;
            background-color: #111111;
            border-radius: 4px;
            position: absolute;
            top: -50px;
            right: -70px;
            transition: all 0.3s ease;
            opacity: 0;
            transform: scale(0);

            &:global(.expend) {
                top: 50px;
                right: -10px;
                opacity: 1;
                transform: scale(1);
            }

            > .triangle {
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #111111;
                position: absolute;
                top: -10px;
                right: 15px;
            }

            > .list {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                z-index: 100;

                > .content {
                    display: flex;
                    flex-direction: column;
                    padding: 10px 0;

                    > .item {
                        color: #ffffff;
                        padding: 8px 16px;
                        transition: all 0.2s ease;

                        &:hover {
                            color: #767676;
                        }
                    }
                }

                > .line {
                    width: 100%;
                    height: 1px;
                    background-color: #414141;
                }

                > .logout__btn {
                    margin: 10px 0;
                    padding: 8px 16px;
                    color: #d1d1d1;
                    transition: all 0.2s ease;
                    display: flex;
                    &:hover {
                        color: #ffffff99;
                    }
                }
            }
        }
    }
}
